<template>
	<view>
		<!-- components/loading/loading.wxml -->
		<view v-if="1 == status" class="loadingOuter">
			<view class="loading" @touchmove.stop.prevent="catchMove">
				<!-- <text  class='loading-logo iconfont icon-ums_s_logo'></text> -->
				<view class="loading-content">
					<!-- <view class="loading-icon"></view> -->
					<image :src="staticBaseUrl + '/loading.png'" class="loading-img"></image>
					<view class="loading-tips">加载中，请稍后……</view>
				</view>
			</view>
		</view>
		<view v-if="-1 == status" class="loadingOuter">
			<view class="failed">
				<image :src="staticBaseUrl + '/loadFail.png'" style="width: 380rpx;height: 380rpx;"></image>
				<!-- <image class="failed-img" src="/static/image/loadfailed.png"></image> -->
				<view class="failed-tips">加载失败，请检查网络</view>
				<view class="failed-re" @tap.stop.prevent="reload">重新加载</view>
			</view>
		</view>
	</view>
</template>

<script>
	// components/loading/loading.js
	import {
		staticBaseUrl
	} from '@/utils/constant.js'
	
	export default {
		data() {
			return {
				staticBaseUrl,
			};
		},
		/**
		 * 组件的属性列表
		 */
		props: {
			status: {
				type: Number,
				default: 1 //1加载中，0加载成功，-1加载失败
			}
		},
		/**
		 * 组件的方法列表
		 */
		methods: {
			//重新加载
			reload: function(e) {
				var pages = getCurrentPages();
				console.log(pages);
				var currentPage = pages[pages.length - 1];
				var options = currentPage.options;
				var url = '/' + currentPage.route;
				var optionsStr = '';

				for (var key in options) {
					optionsStr += '&' + key + '=' + options[key];
				}

				if ('' != optionsStr) {
					url += '?' + optionsStr.substring(1);
				}

				console.log(url);
				uni.redirectTo({
					url: url,
					fail: (err) => {
						uni.reLaunch({
							url: url
						});
					}
				});
			},
			catchMove: function() {
				return;
			}
		}
	};
</script>
<style>
	.loadingOuter {
		position: fixed;
		z-index: 1001;
		width: 100%;
		height: 100%;
		overflow: hidden;
		background-color: #fff;
		font-family: '微软雅黑';
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.loading {
		width: 100%;
		height: 100%;
		font-size: 28rpx;
		text-align: center;
		background-color: rgba(0, 0, 0, 0.3);
	}
	
	.loading-img{
		/* width: 450rpx;
		height: 310rpx; */
		/* padding-right: 14rpx; */
	}
	
	.loading-content{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		border-radius: 16rpx;
		background-color: #fff;
		/* transform: translateX(-50%); */
	}
	

/* 	.loading-content {
		position: absolute;
		left: 50%;
		top: 30%;
		transform: translateX(-50%);
		width: 240rpx;
		height: 240rpx;
		border-radius: 16rpx;
		background-color: #444;
		margin: 0 auto;
	} */

	.loading-icon {
		margin: 40rpx 10rpx 0;
		width: 40px;
		height: 40px;
		display: inline-block;
		vertical-align: middle;
		-webkit-animation: weuiLoading 1s steps(12, end) infinite;
		animation: weuiLoading 1s steps(12, end) infinite;
		background: transparent url() no-repeat;
		background-size: 100%;
	}

	.loading-tips {
		display: inline-block;
		vertical-align: middle;
		color: #666;
		/* color: #fff; */
		font-size: 24rpx;
		margin-top: 30rpx;
	}

	.loading-logo {
		display: block;
		color: #ccc;
		font-size: 100rpx !important;
	}

	.failed {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #aaa;
		font-size: 28rpx;
		margin-bottom: 150rpx;
	}

	.failed-img {
		width: 200rpx;
		height: 200rpx;
	}

	.failed-tips {
		margin: 20rpx 0;
	}

	.failed-re {
		border: 1rpx solid #ddd;
		padding: 5rpx 30rpx;
		font-size: 26rpx;
		border-radius: 5rpx;
	}
</style>
